<template>
  <div class="mentor-duties-page">
    <!-- 学生管理页面 -->
    <div v-if="isStudentManagement" class="student-management-page">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>学生管理</h1>
        <p>管理指导的学生，查看学习进度和项目状态</p>
      </div>

      <!-- 学生列表 -->
      <div class="students-section">
        <el-row :gutter="20">
          <el-col
            v-for="student in students"
            :key="student.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
          >
            <el-card class="student-card" shadow="hover">
              <div class="student-header">
                <div class="student-avatar">
                  <el-avatar :size="60" :src="student.avatar" />
                </div>
                <div class="student-info">
                  <h3 class="student-name">{{ student.name }}</h3>
                  <p class="student-id">学号：{{ student.studentId }}</p>
                  <el-tag :type="getStudentStatusType(student.status)" size="small">
                    {{ student.statusText }}
                  </el-tag>
                </div>
              </div>

              <div class="student-content">
                <div class="info-item">
                  <el-icon><School /></el-icon>
                  <span>{{ student.major }}</span>
                </div>
                <div class="info-item">
                  <el-icon><Calendar /></el-icon>
                  <span>年级：{{ student.grade }}</span>
                </div>
                <div class="info-item">
                  <el-icon><Phone /></el-icon>
                  <span>{{ student.phone }}</span>
                </div>
                <div class="info-item">
                  <el-icon><Message /></el-icon>
                  <span>{{ student.email }}</span>
                </div>
              </div>

              <div class="student-progress">
                <div class="progress-item">
                  <span>学习进度</span>
                  <el-progress :percentage="student.learningProgress" :color="getProgressColor(student.learningProgress)" />
                </div>
                <div class="progress-item">
                  <span>项目进度</span>
                  <el-progress :percentage="student.projectProgress" :color="getProgressColor(student.projectProgress)" />
                </div>
              </div>

              <div class="student-actions">
                <el-button type="primary" @click="viewStudentDetail(student)">
                  查看详情
                </el-button>
                <el-button @click="contactStudent(student)">
                  联系学生
                </el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 课题指导页面 -->
    <div v-else-if="isProjectGuidance" class="project-guidance-page">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>课题指导</h1>
        <p>指导学生完成课题研究，提供学术指导和进度跟踪</p>
      </div>

      <!-- 指导项目列表 -->
      <div class="projects-section">
        <el-row :gutter="20">
          <el-col
            v-for="project in guidanceProjects"
            :key="project.id"
            :xs="24"
            :sm="12"
            :md="8"
          >
            <el-card class="project-card" shadow="hover">
              <div class="project-header">
                <h3 class="project-title">{{ project.title }}</h3>
                <el-tag :type="getProjectStatusType(project.status)" size="small">
                  {{ project.statusText }}
                </el-tag>
              </div>

              <div class="project-content">
                <p class="project-description">{{ project.description }}</p>

                <div class="project-info">
                  <div class="info-item">
                    <el-icon><User /></el-icon>
                    <span>学生：{{ project.studentName }}</span>
                  </div>
                  <div class="info-item">
                    <el-icon><OfficeBuilding /></el-icon>
                    <span>企业：{{ project.enterprise }}</span>
                  </div>
                  <div class="info-item">
                    <el-icon><Calendar /></el-icon>
                    <span>开始：{{ project.startDate }}</span>
                  </div>
                  <div class="info-item">
                    <el-icon><Timer /></el-icon>
                    <span>进度：{{ project.progress }}%</span>
                  </div>
                </div>

                <div class="project-progress">
                  <el-progress :percentage="project.progress" :color="getProgressColor(project.progress)" />
                </div>

                <div class="project-milestones">
                  <h4>里程碑</h4>
                  <div class="milestone-list">
                    <div 
                      v-for="milestone in project.milestones" 
                      :key="milestone.id"
                      class="milestone-item"
                      :class="{ completed: milestone.completed }"
                    >
                      <el-icon><Check /></el-icon>
                      <span>{{ milestone.name }}</span>
                      <span class="milestone-date">{{ milestone.date }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="project-actions">
                <el-button type="primary" @click="viewProjectDetail(project)">
                  查看详情
                </el-button>
                <el-button @click="provideGuidance(project)">
                  提供指导
                </el-button>
                <el-button @click="viewReports(project)">
                  查看报告
                </el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 默认页面 -->
    <div v-else class="default-page">
      <div class="page-header">
        <h1>导师工作台</h1>
        <p>请选择左侧菜单进入相应功能模块</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { 
  School,
  Phone,
  Message,
  Check,
  User,
  OfficeBuilding,
  Calendar,
  Timer
} from '@element-plus/icons-vue';

const route = useRoute();

// 判断当前页面类型
const isStudentManagement = computed(() => route.path === '/mentor/students');
const isProjectGuidance = computed(() => route.path === '/mentor/projects');

// 学生管理静态数据
const students = [
  {
    id: 1,
    name: '张明',
    studentId: '2021001001',
    major: '计算机科学与技术',
    grade: '研二',
    phone: '13800138001',
    email: 'zhangming@mail.sysu.edu.cn',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    status: 'active',
    statusText: '在读',
    learningProgress: 85,
    projectProgress: 70,
    gpa: 3.8,
    researchDirection: '人工智能与机器学习',
    joinDate: '2023-09-01',
    lastContact: '2024-01-15'
  },
  {
    id: 2,
    name: '李华',
    studentId: '2021001002',
    major: '软件工程',
    grade: '研一',
    phone: '13800138002',
    email: 'lihua@mail.sysu.edu.cn',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    status: 'active',
    statusText: '在读',
    learningProgress: 92,
    projectProgress: 45,
    gpa: 3.9,
    researchDirection: '软件架构与设计',
    joinDate: '2023-09-01',
    lastContact: '2024-01-10'
  },
  {
    id: 3,
    name: '王芳',
    studentId: '2022001001',
    major: '数据科学与大数据技术',
    grade: '研一',
    phone: '13800138003',
    email: 'wangfang@mail.sysu.edu.cn',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    status: 'active',
    statusText: '在读',
    learningProgress: 78,
    projectProgress: 30,
    gpa: 3.7,
    researchDirection: '大数据分析与挖掘',
    joinDate: '2023-09-01',
    lastContact: '2024-01-12'
  },
  {
    id: 4,
    name: '刘强',
    studentId: '2021001003',
    major: '网络工程',
    grade: '研二',
    phone: '13800138004',
    email: 'liuqiang@mail.sysu.edu.cn',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    status: 'graduated',
    statusText: '已毕业',
    learningProgress: 100,
    projectProgress: 100,
    gpa: 3.6,
    researchDirection: '网络安全与防护',
    joinDate: '2022-09-01',
    lastContact: '2023-12-20'
  },
  {
    id: 5,
    name: '陈静',
    studentId: '2022001002',
    major: '人工智能',
    grade: '研一',
    phone: '13800138005',
    email: 'chenjing@mail.sysu.edu.cn',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    status: 'active',
    statusText: '在读',
    learningProgress: 88,
    projectProgress: 25,
    gpa: 3.8,
    researchDirection: '深度学习与计算机视觉',
    joinDate: '2023-09-01',
    lastContact: '2024-01-08'
  }
];

// 课题指导静态数据
const guidanceProjects = [
  {
    id: 1,
    title: '基于深度学习的图像识别系统',
    description: '开发一个基于卷积神经网络的图像识别系统，用于工业质检场景中的缺陷检测。系统需要实现高精度的缺陷识别，支持多种工业产品的质量检测。',
    studentName: '张明',
    studentId: '2021001001',
    enterprise: '华为技术有限公司',
    mentor: '李教授',
    startDate: '2023-10-01',
    endDate: '2024-06-30',
    status: 'ongoing',
    statusText: '进行中',
    progress: 70,
    budget: 50000,
    category: '人工智能',
    milestones: [
      { id: 1, name: '需求分析与技术方案设计', date: '2023-10-15', completed: true },
      { id: 2, name: '数据集收集与预处理', date: '2023-11-30', completed: true },
      { id: 3, name: '模型训练与优化', date: '2024-01-15', completed: true },
      { id: 4, name: '系统集成与测试', date: '2024-03-31', completed: false },
      { id: 5, name: '部署与验收', date: '2024-06-30', completed: false }
    ],
    lastReport: '2024-01-10',
    nextMeeting: '2024-01-25'
  },
  {
    id: 2,
    title: '企业级微服务架构设计与实现',
    description: '为某电商平台设计并实现微服务架构，包括服务拆分、API网关、配置中心等核心组件。项目旨在提高系统的可扩展性和维护性。',
    studentName: '李华',
    studentId: '2021001002',
    enterprise: '腾讯科技',
    mentor: '王教授',
    startDate: '2023-11-01',
    endDate: '2024-08-31',
    status: 'ongoing',
    statusText: '进行中',
    progress: 45,
    budget: 60000,
    category: '软件工程',
    milestones: [
      { id: 1, name: '架构设计评审', date: '2023-11-15', completed: true },
      { id: 2, name: '核心服务开发', date: '2024-02-28', completed: false },
      { id: 3, name: 'API网关集成', date: '2024-04-30', completed: false },
      { id: 4, name: '性能测试与优化', date: '2024-06-30', completed: false },
      { id: 5, name: '生产环境部署', date: '2024-08-31', completed: false }
    ],
    lastReport: '2024-01-05',
    nextMeeting: '2024-01-20'
  },
  {
    id: 3,
    title: '大数据平台用户行为分析',
    description: '构建大数据分析平台，对用户行为数据进行实时处理和分析，为企业决策提供数据支持。平台需要支持PB级数据处理能力。',
    studentName: '王芳',
    studentId: '2022001001',
    enterprise: '阿里巴巴集团',
    mentor: '张教授',
    startDate: '2023-12-01',
    endDate: '2024-09-30',
    status: 'ongoing',
    statusText: '进行中',
    progress: 30,
    budget: 45000,
    category: '大数据',
    milestones: [
      { id: 1, name: '数据源调研与接入', date: '2023-12-20', completed: true },
      { id: 2, name: '数据清洗与预处理', date: '2024-02-15', completed: false },
      { id: 3, name: '实时计算框架搭建', date: '2024-04-30', completed: false },
      { id: 4, name: '分析模型开发', date: '2024-07-15', completed: false },
      { id: 5, name: '可视化展示系统', date: '2024-09-30', completed: false }
    ],
    lastReport: '2024-01-12',
    nextMeeting: '2024-01-28'
  },
  {
    id: 4,
    title: '网络安全态势感知系统',
    description: '开发网络安全态势感知系统，实现网络威胁检测、风险评估和预警功能。系统需要具备实时监控和智能分析能力。',
    studentName: '刘强',
    studentId: '2021001003',
    enterprise: '奇安信科技',
    mentor: '陈教授',
    startDate: '2022-09-01',
    endDate: '2023-12-31',
    status: 'completed',
    statusText: '已完成',
    progress: 100,
    budget: 55000,
    category: '网络安全',
    milestones: [
      { id: 1, name: '系统架构设计', date: '2022-10-15', completed: true },
      { id: 2, name: '威胁检测算法开发', date: '2023-03-31', completed: true },
      { id: 3, name: '风险评估模型', date: '2023-06-30', completed: true },
      { id: 4, name: '系统集成测试', date: '2023-09-30', completed: true },
      { id: 5, name: '项目验收与交付', date: '2023-12-31', completed: true }
    ],
    lastReport: '2023-12-20',
    nextMeeting: '已完成'
  },
  {
    id: 5,
    title: '智能推荐系统优化研究',
    description: '基于深度学习的推荐系统优化，提高推荐准确率和用户满意度。研究内容包括协同过滤、内容推荐和混合推荐算法。',
    studentName: '陈静',
    studentId: '2022001002',
    enterprise: '字节跳动',
    mentor: '李教授',
    startDate: '2024-01-01',
    endDate: '2024-12-31',
    status: 'ongoing',
    statusText: '进行中',
    progress: 25,
    budget: 40000,
    category: '人工智能',
    milestones: [
      { id: 1, name: '文献调研与方案设计', date: '2024-01-31', completed: false },
      { id: 2, name: '数据收集与特征工程', date: '2024-03-31', completed: false },
      { id: 3, name: '模型训练与调优', date: '2024-07-31', completed: false },
      { id: 4, name: 'A/B测试与效果评估', date: '2024-10-31', completed: false },
      { id: 5, name: '论文撰写与答辩', date: '2024-12-31', completed: false }
    ],
    lastReport: '2024-01-08',
    nextMeeting: '2024-01-22'
  }
];

// 学生状态类型获取
const getStudentStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    active: 'success',
    graduated: 'info',
    suspended: 'warning',
    dropped: 'danger'
  };
  return typeMap[status] || 'info';
};

// 项目状态类型获取
const getProjectStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    ongoing: 'primary',
    completed: 'success',
    pending: 'info',
    problem: 'danger'
  };
  return typeMap[status] || 'info';
};

// 进度条颜色获取
const getProgressColor = (percentage: number) => {
  if (percentage >= 80) return '#67c23a';
  if (percentage >= 60) return '#e6a23c';
  if (percentage >= 40) return '#f56c6c';
  return '#909399';
};

// 学生管理相关方法
const viewStudentDetail = (student: any) => {
  ElMessage.info(`查看学生 ${student.name} 的详细信息`);
};

const contactStudent = (student: any) => {
  ElMessage.info(`联系学生 ${student.name} (${student.phone})`);
};

// 课题指导相关方法
const provideGuidance = (project: any) => {
  ElMessage.info(`为项目 ${project.title} 提供指导`);
};

const viewReports = (project: any) => {
  ElMessage.info(`查看项目 ${project.title} 的报告`);
};

const viewProjectDetail = (project: any) => {
  ElMessage.info(`查看项目 ${project.title} 的详细信息`);
};
</script>

<style scoped>
.mentor-duties-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-header h1 {
  color: #045108;
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

/* 学生管理页面样式 */
.student-management-page,
.project-guidance-page {
  padding: 20px;
}

.student-card {
  margin-bottom: 20px;
  transition: all 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
}

.student-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.student-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
  padding: 16px 16px 0;
}

.student-avatar {
  flex-shrink: 0;
}

.student-info {
  flex: 1;
}

.student-name {
  margin: 0 0 4px 0;
  font-size: 18px;
  color: #045108;
  font-weight: 600;
}

.student-id {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 14px;
}

.student-content {
  margin-bottom: 16px;
  padding: 0 16px;
}

.student-progress {
  margin-bottom: 16px;
  padding: 0 16px;
}

.progress-item {
  margin-bottom: 12px;
}

.progress-item span {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.student-actions {
  display: flex;
  gap: 12px;
  padding: 0 16px 16px;
}

/* 课题指导页面样式 */
.project-card {
  margin-bottom: 20px;
  transition: all 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 16px 16px 0;
}

.project-title {
  margin: 0;
  font-size: 18px;
  color: #045108;
  flex: 1;
  margin-right: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.project-content {
  margin-bottom: 20px;
  padding: 0 16px;
}

.project-description {
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
  font-size: 14px;
}

.project-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
}

.project-progress {
  margin-bottom: 16px;
}

.project-milestones {
  margin-bottom: 16px;
}

.project-milestones h4 {
  margin: 0 0 12px 0;
  color: #045108;
  font-size: 14px;
  font-weight: 600;
}

.milestone-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.milestone-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.milestone-item.completed {
  background: #f0f9ff;
  color: #67c23a;
  border-left: 3px solid #67c23a;
}

.milestone-item.completed .el-icon {
  color: #67c23a;
}

.milestone-item:not(.completed) .el-icon {
  color: #c0c4cc;
}

.milestone-date {
  margin-left: auto;
  color: #999;
  font-size: 12px;
}

.project-actions {
  display: flex;
  gap: 12px;
  padding: 0 16px 16px;
}

/* 默认页面样式 */
.default-page {
  padding: 20px;
  text-align: center;
}

.default-page .page-header {
  margin-top: 100px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .student-actions,
  .project-actions {
    flex-direction: column;
  }

  .student-actions .el-button,
  .project-actions .el-button {
    width: 100%;
  }

  .project-info {
    grid-template-columns: 1fr;
  }

  .student-header {
    flex-direction: column;
    text-align: center;
  }

  .project-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 576px) {
  .mentor-duties-page {
    padding: 10px;
  }

  .page-header h1 {
    font-size: 24px;
  }

  .page-header p {
    font-size: 14px;
  }
}
</style>
